<template>
  <z-paging
    ref="paging"
    v-model="itemList"
    @query="queryList"
    :fixed="true"
    :auto="false"
    :auto-show-back-to-top="true"
    :empty-view-img="`${getImageUrl('empty.png')} `"
    :empty-view-img-style="imgStyle"
  >
    <view solt="top">
      <u-navbar title="扫码订单" height="50" title-size="36"></u-navbar>
    </view>
    <view style="padding: 20rpx; font-size: 28rpx">
      <view
        class="order-box dis-flex flex-x-start flex-y-center"
        v-for="(item, index) in itemList"
        :key="index"
      >
        <image
          v-if="item.payed"
          src="/static/already_pay.png"
          style="width: 100rpx; height: 100rpx"
        ></image>
        <image v-else src="/static/no_pay.png" style="width: 100rpx; height: 100rpx"></image>
        <view class="dis-flex flex-column" style="margin-left: 20rpx">
          <view class="dis-flex flex-y-between">
            <text class="dis-flex flex-y-center flex-y-between"> 单号：{{ item.tradeNo }}</text>
          </view>
          <text
            class="dis-flex flex-y-center flex-y-between"
            style="font-size: 30rpx; margin: 10rpx 0"
          >
            {{ item.note }}
          </text>
          <u-line></u-line>
          <view class="dis-flex flex-y-between" style="font-size: 24rpx">
            <text>{{ $utils.parseTime(item.createTime) }}</text>
            <view>
              <text>原价</text>
              <text style="color: orange">¥{{ (item.originPrice * 0.01).toFixed(2) }}</text>
              <text style="margin-left: 10rpx">{{ item.payed ? '实付' : '应付' }}</text>
              <text style="color: orange">¥{{ (item.price * 0.01).toFixed(2) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      imgStyle: {
        width: '12rem'
      },
      itemList: []
    }
  },
  onLoad() {
    this.queryList(1)
  },
  methods: {
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      this.$u
        .get('/app-api/trade/order/offline-scan/page', {
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    },
    onCancel() {
      this.show = true
    }
  }
}
</script>

<style scoped lang="scss">
.order-box {
  position: relative;
  background-color: #fff;
  padding: 20rpx 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
}
</style>
